<template>
  <div class="container">
    <div class="group-list">

      <div class="list-header">
        <div class="title">
          固定组合
        </div>
        <div class="content">
          <span>+2.12%</span> | 昨日涨跌幅
        </div>
      </div>


      <ul class="list-box">
        <li>
          <div class="box-left"></div>
          <div class="box-right"></div>
        </li>
        <li></li>
        <li></li>
        <li></li>
      </ul>

    </div>
  </div>
</template>

<script>
  export default {
    name: 'change-tactics',
    data() {
      return {};
    },
    mounted() {},
  };
</script>

<style lang="less" scoped>
.container{
  width: 100vw;
    min-height: 100vh;
    background-color: #ffcb71;
    position: relative;
    background-image: url('../../assets/images/home/bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    // align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.group-list{
    width: 351px;
    height: 609px;
    margin-top: 20px;
    background: linear-gradient(rgba(255,255,255,1) 0%,rgba(255,228,193,1) 100%,rgba(255,228,193,1) 100%);
    box-shadow: inset -5px 0px 8px rgba(255, 255, 255, 0.63);;
    border-radius: 4px;

}
.list-header{
  margin-bottom: 4px;
}
.list-header .title{
    background: url(../../assets/images/change-tactics/title.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 174px;
    height: 38px;
    margin: 0 auto;
    line-height: 38px;
    text-align: center;
    color: rgb(205, 66, 15);
    font-size: 16px;
}
.list-header .content{
  margin-top: 8px;
  text-align: center;
  color: rgb(205, 66, 15);
}
.list-header .content span{
  color: rgb(240, 27, 52);
  color: rgb(67, 190, 114);
}
.list-box li{
  width: 327px;
  height: 85px;
  border: 1px solid #ccc;
  margin: 8px auto 0px auto;
  background: #fff;
  border-radius: 6px;
}
.box-left{
  
}
</style>
